<!-- Main Content -->
<div class="main-content">
    <section class="section">

        <div class="section-body">

            <div class="card">
                <div class="card-body">

                    <div class="row filterSearch">

                        <div class="col-12 col-lg-2 input-group input-group-flush a-field valid" a-field-length="24" a-field-name="username" a-field-type="input">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            </div>
                            <input class="form-control search a-field-main" type="search" placeholder="{i18n{ manager.username }i18n}" name="keyword" value="{{constants.Params.username}}" required>
                        </div>

                        <div class="col-12 col-lg-2 input-group input-group-flush a-field valid" a-field-length="24" a-field-name="mobile" a-field-type="input">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-phone"></i></span>
                            </div>
                            <input class="form-control search a-field-main" type="search" placeholder="{i18n{ manager.mobile }i18n}" name="keyword" value="{{constants.Params.mobile}}" required>
                        </div>

                        <div class="col-12 col-lg-2 input-group input-group-flush a-field valid" a-field-length="32" a-field-name="email" a-field-type="input">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            </div>
                            <input class="form-control search a-field-main" type="search" placeholder="{i18n{ manager.email }i18n}" name="keyword" value="{{constants.Params.email}}" required>
                        </div>


                        <div class="col-6 col-lg-2 a-field valid" a-field-type='input' a-field-name='starttime' a-field-length="15" >


                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fas fa-calendar"></i>
                                    </div>
                                </div>
                                <input type="hidden" class="form-control a-field-main" id="datePickerStamp1" placeholder="" value="">
                                <input type="text" class="form-control datetimepicker" placeholder="{i18n{ manager.chooseStartTime }i18n}" id="datePicker1" >
                            </div>

                        </div>


                        <div class="col-6 col-lg-2 a-field valid" a-field-type='input' a-field-name='endtime' a-field-length="15" >

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <i class="fas fa-calendar"></i>
                                    </div>
                                </div>
                                <input type="hidden" class="form-control a-field-main" id="datePickerStamp2" placeholder="" value="">
                                <input type="text" class="form-control datetimepicker" placeholder="{i18n{ manager.chooseEndTime }i18n}" id="datePicker2" >
                            </div>

<!--                            <div class="input-group input-group-merge">-->
<!--                                <input type="hidden" class="form-control a-field-main" id="datePickerStamp2" placeholder="" value="">-->
<!--                                <input type="text" class="form-control form-control-prepended" placeholder="{i18n{ manager.chooseEndTime }i18n}" id="datePicker2"  data-toggle="flatpickr" data-options='{"enableTime": true,"dateFormat": "Y-m-d H:i","locale":"zh"}'>-->
<!--                                <div class="input-group-prepend">-->
<!--                                    <div class="input-group-text">-->
<!--                                        <a class="fas fa-calendar-alt text-primary"></a>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

                        </div>

                        <div class="col-12 col-lg-2 text-right">

                            <button class="btn btn-primary mr-3" type="button" onclick="MANAGER.filterSearch();">
                                {i18n{ Search }i18n}
                            </button>

                            <button class="btn btn-outline-dark" type="button" onclick="Aps.query.clearFilter();">
                                {i18n{ Reset }i18n}
                            </button>


                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="section-body">


            <div class="card">

                <div class="card-body">

                    <div class="row">

                        <div class="col">

                            <ul class="col nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link [if[::constants.Params.status=enabled::active]if]" href="#" onclick="Aps.query.addFilter('status','enabled')">
                                        {i18n{ status.enabled }i18n}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link [if[::constants.Params.status=blocked::active]if]" href="#" onclick="Aps.query.addFilter('status','blocked')">
                                        {i18n{ status.blocked }i18n}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link [not[::constants.Params.status::active]not]" href="#" onclick="Aps.query.removeFilter('status')">
                                        {i18n{ status.all }i18n}
                                    </a>
                                </li>
                            </ul>

                        </div>


<!--                        <div class="col-auto">-->
<!--                            <div class="dropdown my-2">-->

<!--                                <button class="btn btn-sm dropdown-toggle [not[::constants.Params.vip::btn-outline-primary]not] [if[::constants.Params.vip::btn-primary]if]" type="button" id="dropdownMenuButtonVip" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
<!--                                    {i18n{ manager.vip }i18n}-->
<!--                                </button>-->

<!--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonVip" style="">-->
<!--                                    <a class="dropdown-item a-color-6" onclick="Aps.query.removeFilter('vip');" >{i18n{ manager.vip0 }i18n}</a>-->
<!--                                    <a class="dropdown-item a-color-6" onclick="Aps.query.addFilter('vip','1');" >{i18n{ manager.vip1 }i18n}</a>-->
<!--                                    <a class="dropdown-item a-color-6" onclick="Aps.query.addFilter('vip','2');" >{i18n{ manager.vip2 }i18n}</a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="col-auto">
                            <div class="dropdown my-2">

                                <button class="btn btn-sm dropdown-toggle [not[::constants.Params.order::btn-outline-primary]not] [if[::constants.Params.order::btn-primary]if]" type="button" id="dropdownMenuButtonViewtimes" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    {i18n{ manager.sort }i18n} [if[::constants.Params.order::{{constants.Params.order}}]if]
                                </button>

                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonViewtimes" style="">
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.removeFilter('order');" >{i18n{ status.default }i18n}</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('order','createtime DESC');" >{i18n{ manager.createtime }i18n} <i class="far fa-arrow-down"></i></a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('order','createtime ASC');" >{i18n{ manager.createtime }i18n} <i class="far fa-arrow-up"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="col-auto">
                            <div class="dropdown my-2">
                                <button class="btn btn-sm btn-white dropdown-toggle [not[::constants.Params.size::btn-outline-primary]not] [if[::constants.Params.size::btn-primary]if]" type="button" id="dropdownMenuButtonSize" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="fas fa-list mr-1"></span> {i18n{ manager.sizePerPage }i18n} [not[::constants.Params.size::10]not]{{constants.Params.size}}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonSize" style="">
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.removeFilter('size');">{i18n{default}i18n}</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('size','8');">8</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('size','12');">12</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('size','24');">24</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('size','48');">48</a>
                                    <a class="dropdown-item a-color-6" href="" onclick="Aps.query.addFilter('size','120');">120</a>

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="tab-content">

                        <div class="tab-pane table-responsive active mb-0">
                            <table class="table table-sm card-table table-striped" >
                                <thead>
                                <tr>
                                    <th>UID</th>
                                    <th>{i18n{ manager.username }i18n}</th>
                                    <th>{i18n{ manager.nickname }i18n}</th>
                                    <th>{i18n{ manager.createtime }i18n}</th>
                                    <th>{i18n{ manager.status }i18n}</th>
                                    <th>{i18n{ manager.operation }i18n}</th>
                                    <th>{i18n{ manager.more }i18n}</th>
                                </tr>
                                </thead>
                                <tbody class="list">
                                [not[::userList::
                                <tr>
                                    <td colspan="10">
                                        <div class="row justify-content-center">
                                            <div class="col-12 col-md-8 col-xl-6 py-5">

                                                <h2>
                                                    {i18n{SYS_NON}i18n}
                                                </h2>

                                                <button class="btn btn-primary lift" onclick="Aps.router.back(-1)">
                                                    {i18n{ back }i18n}
                                                </button>

                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                ]not]

                                ||loop??userList??
                                <tr>
                                    <td class="p-2">
                                        {{userid}}
                                    </td>
                                    <td class="p-2">{{username}}</td>
                                    <td class="p-2">
                                        <a href="detail/{{userid}}" class=" nav-link-user">
                                            <img alt="image" src="{{avatar}}!avatar" class="rounded-circle mr-1">
                                            <div class="d-sm-none d-lg-inline-block">{{nickname}}</div></a>
                                    </td>
                                    <td class="p-2">{{createtime_}}</td>
                                    <td class="p-2 [if[::status=trash::text-muted]if]">{{status_}}</td>
                                    <td class="p-2">
                                        <a href="detail/{{userid}}" class="mr-2"><span class="fa fa-info-circle a-text-l"></span></a>
                                        <a href="edit/{{userid}}" class="mr-2"><span class="fa fa-edit a-text-l"></span></a>
                                    </td>
                                    <td class="p-2 text-right">
                                        <div class="dropdown">
                                            <a href="#" class="dropdown-ellipses" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                &nbsp; <i class="fa fa-ellipsis-v a-text-l"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                [if[::status=enabled::<a class="dropdown-item a-color-6" onclick=MANAGER.blockUser('{{userid}}');><span class="far fa-ban mr-2 a-text-l text-danger"></span>{i18n{ manager.ban }i18n}</a>]if]
                                                [not[::status=enabled::<a class="dropdown-item a-color-6" onclick=MANAGER.recoverUser('{{userid}}');><i class='far fa-refresh a-text-l text-success'></i>{i18n{ manager.recover }i18n}</a>]not]
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                loop||
                                </tbody>
                            </table>
                        </div>

                    </div>

                    <nav aria-label="Page navigation example">
                        <ul class="pagination">

                            [if[::pager.first::
                            <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','1')">{i18n{ firstPage }i18n}</a></li>
                            ]if]

                            [if[::pager.prev::
                            <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.prev}}')">{i18n{ prevPage }i18n}</a></li>
                            ]if]

                            ||loop??pager.list??
                            [if[::current:: <li class="page-item active"><a class="page-link" href="#" >{{page}}</a></li> ]if]
                            [not[::current::<li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{page}}')">{{page}}</a></li> ]not]
                            loop||

                            [if[::pager.next::
                            <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.next}}')">{i18n{ nextPage }i18n}</a></li>
                            ]if]

                            [if[::pager.last::
                            <li class="page-item"><a class="page-link" href="#" onclick="Aps.query.addFilter('page','{{pager.last}}')">{i18n{ lastPage }i18n} ({{pager.last}})</a></li>
                            ]if]

                        </ul>
                    </nav>


                </div>

            </div>


        </div>

    </section>
</div>


